<template>
	<div class="">
		<myNavbar :title="title + '登记'"></myNavbar>
		<div class="register-list">
			<div class="register-item bb" @click="showSelect">
				<text class="item-label">商品名称</text>
				<div class="item-content">
					<!-- <input class="item-content-input" placeholder="请选择商品" :accept="right" v-model="form.name" /> -->
					<text class="item-content-text" :style="{'color': form.name? '': '#999'}">{{form.name?form.name:'请选商品'}}</text>
					<text class="item-content-icon">&#xe61f;</text>
				</div>
			</div>
			<div class="register-item bb">
				<text class="item-label">{{title}}数量</text>
				<input class="item-content-input" :placeholder="'请输入' + title + '数量'" type="number" :accept="right" v-model="form.quantity" />
				<text class="item-content-icon">&#xe61f;</text>
			</div>
			<div class="register-item bb">
				<text class="item-label">备注</text>
				<input class="item-content-input" placeholder="请输入备注" :accept="right" v-model="form.memo" />
				<text class="item-content-icon">&#xe61f;</text>
			</div>
		</div>
<!--		<div class="register-list-submit" @click="submit"><text class="register-list-submit-btn">确认登记</text></div>-->
        <button class="btn register-list-submit" @click="submit" :text="submitTitle" :loading="submitLoad"></button>
		<selectBox v-if="isShowSelect" :requests="'product'" @clearSelect="clearSelect" @completesEelect="completesEelect"></selectBox>
	</div>
</template>
<script>
import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
import selectBox from './components/selectBox.vue'
const storage = weex.requireModule('storage')
import { addEmptyBarrel, decEmptyBarrel } from '../../../../api/emptyBarrel.js'

export default {
	name: '',
	components: { myNavbar, selectBox },
	data() {
		return {
			isShowSelect: false,
			id: '',
			title: '出桶',
			form: {},
            submitLoad:false,
            submitTitle:'确认登记'
		};
	},
	created() {
		this.initData()
		
	},
	methods: {
		initData() {
			this.id = app.config.params.id
			this.title = app.config.params.title
			this.form.memo= app.config.params.title
		},
		showSelect() {
			this.isShowSelect = true
		},
		clearSelect() {
			this.isShowSelect = false
		},
		completesEelect(data){
			console.log(data, 'data')
			this.isShowSelect = false
			this.form.productId = data.id
			this.form.adminFreight = 0
			this.form.cost = 0
			this.form.name = data.name
			this.form.shippingFreight = 0
			this.form.sn = data.sn
			this.form.spec = data.spec1
			this.form.thumbnail = data.thumbnail
			this.form.unit = data.unit
		},
		submit() {
		    var _this = this
			if (this.isNull(this.form.productId)) {
				eeui.toast({
					message: '请选择商品名称'
				});
			} else if (this.isNull(this.form.quantity)) {
				eeui.toast({
					message: `请输入${title}数量`
				});
			} else if (this.isNull(this.form.memo)) {
				eeui.toast({
					message: '请输入备注'
				});
			} else {
				this.form.memberId = this.id
				let obj = {}
				for (const key in this.form) {
				  obj[key] = this.form[key]
				}
				const tempFrom = [obj]
				if (this.title === '欠桶') {
                    _this.submitLoad = true
                    _this.submitTitle = '加载中'
					tempFrom[0].quantity = -Math.abs(tempFrom[0].quantity) // 全部转成负数避免用户输入错误
					tempFrom[0].emptyType = 1
					console.log(tempFrom, 'tempFrom')
					decEmptyBarrel(tempFrom).then(res => {
                        _this.submitLoad = false
                        _this.submitTitle = '确认登记'
						storage.setItem('register', 'edit')
						eeui.closePage()
					}).catch(err => {
                        _this.submitLoad = false
                        _this.submitTitle = '确认登记'
					    console.log(err)
					})
				} else if (this.title === '存桶'){
                    _this.submitLoad = true
                    _this.submitTitle = '加载中'
					tempFrom[0].quantity = Math.abs(tempFrom[0].quantity)
					tempFrom[0].emptyType = 2
					addEmptyBarrel(tempFrom).then(res => {
                        _this.submitLoad = false
                        _this.submitTitle = '确认登记'
						storage.setItem('register', 'edit')
						eeui.closePage()
					}).catch(err => {
					    console.log(err)
                        _this.submitLoad = false
                        _this.submitTitle = '确认登记'
					})
				}
			}
		}
	}
};
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgb(248, 248, 248);
	}
	.register-list {
		margin: 20px 20px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(248, 248, 248, 0.3);
	}
	.register-item {
		padding: 0 27px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 102px;
		font-size: 28px;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: flex;
		align-items: center;
		position: relative;
	}
	.item-label {
		padding-right: 30px;
		font-size: 28px;
	}
	.item-content {
		flex-direction: row;
		align-items: center;
	}
	.item-content-text {
		font-size: 28px;
	}
	.item-content-icon {
		margin-left: 10px;
		color: gray;
		font-size: 36px;
		font-family: iconfont2;
		color: #cccccc;
	}
	.item-content-input {
		width: 460px;
		height: 50px;
		font-size: 28px;
		text-align: right;
	}
	.bb {
		border-bottom-style: solid;
        border-bottom-width: 4px;
        border-bottom-color: rgba(128, 128, 128, 0.062);
	}
	.register-list-submit {
		align-items: center;
		justify-content: center;
		margin: 20px 20px 0;
		width: 710px;
		display: block;
		height: 82px;
	    background-color: #409EFF;
		border-radius: 16px;
        font-size: 32px;
        color: white;
	}

	.register-list-submit-btn {
		font-size: 32px;
		letter-spacing: 5px;
	    color: white;
	}
	.isMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750px;
		background-color: rgba(0, 0, 0, 0.3);
	}
</style>
